<template>
	<div id="page">
		<img class="page-bg" src="../../assets/app-bg.jpg">
		<div class="main">
			<!-- <div class="lang btn-c-lan">
				<div class="on"  @click="langKao"><img class="icon" :src="lang.img" >{{lang.name}}</div>
				<div class="ul btn-c-lan" :class="langOp ?'kai':'' " >
					<div class="li" v-for="(item,index) in langData"
						@click="langTab(item)"
					>
						<img class="icon" :src="item.img" >
						{{item.name}}
					</div>
				</div>
			</div> -->

			<!-- 头部 -->
			<div class="top" :style="{'background-image': 'url('+require('../../assets/my_bg.png') + ')'}">
				<!-- <img class="bg" src="../../assets/my_bg.png"> -->
				<div class="head">
					<img class="img" src="../../assets/head.jpg">
				</div>
				<div class="name">{{address | TurnMa}}</div>

				<div class="invite f-c-lan" v-if="userData.parent_bind == 1" @click="onCopy(userData.invite_code)">
					{{$t('page.My_invite')}}：{{userData.invite_code}}
				</div>
				<div class="invite"  v-if="userData.parent_bind == 0" @click="inviteUp()" >{{$t('page.Invite')}}</div>

				<img class="vip-icon" v-if="userData.gd_level > -1"  @click="navTo('Manuals')" :src="require('../../assets/icon/V'+userData.gd_level+'.png')">
			</div>

			<!-- 钱包 -->
			<div class="wallet" :style="{'background-image': 'url('+require('../../assets/my-noney.png') + ')'}">
				<img class="wallet-bg" src="../../assets/my-noney.png">
				<div class="money">
					{{ userData.balance }}
					<span class="lebel">{{$t('page.Assets')}} (USDT)</span>
				</div>
				<div class="btn-flx">
					<div class="btn on" @click="kefu()">{{$t('page.Recharge')}}</div>
					<div class="btn btn-c-lan" @click="opWithdrawal">{{$t('page.Withdrawal')}}</div>
					<div class="btn f-1 btn-c-lan" @click="navTo('asset')">{{$t('page.Asset_details')}} </div>
				</div>
			</div>

			<!-- 邀请 -->
			<div class="copy" v-if="userData.parent_bind == 1">
				<div class="nei" @click="onCopy(userData.invite_url)">
					<span class="url">{{userData.invite_url}}</span>
					<!-- <span class="f-20">ERSL5AGW</span> -->
					<div class="btn btn-c-lan"><img class="icon" src="../../assets/icon/copy.png"> </div>
				</div>
			</div>
			<!-- vip -->
			<!-- <div class="vip-box">
				<div class="v"><img src="../../assets/icon/vip4.png"><label class="name">基础等级</label></div>
				<div class="v"><img src="../../assets/icon/vip4.png"><label class="name">跟单等级</label></div>
				<div class="v"><img src="../../assets/icon/vip4.png"><label class="name">代理等级</label></div>
			</div> -->

			<!-- 团队 -->
			<div class="team">
				<div class="vip btn-c-lan" v-if="userData.dl_level > -1"  @click="navTo('Grade')" >
					vip{{userData.dl_level}}
				</div>
				<div class="flx">
					<div class="li">
						<div class="num">{{ userData.zt_num }}</div>
						<p>{{$t('page.Direct_push')}}</p>
					</div>
					<div class="li">
						<div class="num">{{ userData.team_num }}</div>
						<p>{{$t('page.Team')}}</p>
					</div>
					<div class="li">
						<div class="num">{{ userData.total_income}}</div>
						<p>{{$t('page.Team_revenue')}}</p>
					</div>
				</div>
				<div class="btn btn-c-lan" @click="navTo('agent')"> {{$t('page.detailed')}}</div>
			</div>
			<!-- 服务 -->
			<div class="service ">
				<div class="col">
						<div class="box" @click="kefu()">
							<div class="iconfont f-c-lan">&#xe606;</div>
							<p class="name">{{$t('page.kefu')}}</p>
							<div class="btn btn-c-lan">Inquiry</div>
						</div>
				</div>
				<div class="col">
					<div class="box" @click="navTo('identity' , 'bind')">
						<div class="iconfont f-c-lan">&#xe78d;</div>
						<p class="name">{{$t('page.identity_authentication')}}</p>
						<div class="btn btn-c-lan">Verify</div>
					</div>
				</div>
				<div class="col">
					<div class="box" @click="navTo('Manuals')">
						<div class="iconfont f-c-lan">&#xe634;</div>
						<p class="name">{{$t('page.User_Manuals')}}</p>
						<div class="btn btn-c-lan">{{$t('page.detailed')}}</div>
					</div>
				</div>
				<div class="col">
					<div class="box" @click="navTo('Grade')">
						<div class="iconfont f-c-lan">&#xe76b;</div>
						<p class="name">{{$t('page.Grade_descrlption')}}</p>
						<div class="btn btn-c-lan">{{$t('page.detailed')}}</div>
					</div>
				</div>
			</div>

			<tabs-footer tab="My"></tabs-footer>
		</div>

		<Recharge ref='chongzhi'></Recharge>

		<Withdrawal @gddocu="gd_Num" ref='tixian'></Withdrawal>

		<Invite @gddocu="gd_Num" ref='invite'></Invite>
	</div>
</template>

<script>
	import Invite from "../../components/Invite.vue"
	import Recharge from "../../components/Recharge.vue"
	import Withdrawal from "../../components/Withdrawal.vue"
	import TabsFooter from '../../components/tabs/tabs-footer.vue'


	import {mapState} from "vuex";
	import store from '@/store'
	import Web3 from "web3";
	import {
		Toast
	} from 'vant';

	export default {
		name: "My",
		components: { TabsFooter, Withdrawal, Recharge , Invite },
		data() {
			return {
				langOp:false,
				lang:{img:require('../../assets/lang/Cn.png'),name:'中文', type:'zh' },
				langData:[
					{img:require('../../assets/lang/Cn.png'),name:'中文', type:'zh' },
					{img:require('../../assets/lang/En.png'),name:'English',type:'en'},
				],
				isShow: false,
				pageDatd: [],
				userData: [],
				// address: '',

				ke_top:'300',
				ke_left:"30",
				ke_posi:false
			}
		},
		mounted() {
			this.$parent.UserInfo(this.$dapp.getAddress())
			this.userData = this.$store.state.user;

			// if(this.$store.state.user.kefu == undefined){
			// 	console.log('实例化加载客服组建')
			// 	// window.canCustomerServer.init(); //实例化加载客服组建
			// 	store.commit('updateUser', {
			// 		kefu: '0'
			// 	})
			// }

		},
		computed: {
			...mapState({
				user: state => state.user,
				address: state => state.user.address
			})
		},
		watch: {
			'user': function(e) {
				this.userData = e
				this.$forceUpdate();
			}
		},

		methods: {
			kefu(){
        console.log(this.userData) //这里是基础信息，那个参数我不知道你换一下

        var address =  this.$dapp.getAddress()
        var href = 'https://60ce2e7b4832d.meiqiacloud.com/dist/standalone.html?eid=20e4eb1347845a5da7d1884475ba21a8&language=en&metadata=' +
            '{"address":"'+address+'","comment":"'+this.userData.id+'"}'
        window.location.href =href;
				// window.canCustomerServer.init(); //实例化加载客服组建
				// window.canCustomerServer.getCustomeServer();
			},

			S_move(e){
				this.ke_posi = false;

				var tuo = e.changedTouches[0].clientY;
				var left = e.changedTouches[0].clientX;

				this.ke_top = tuo;
				this.ke_left = left;

			},
			S_end(){
				this.ke_posi = true;
				var W_w = document.documentElement.clientWidth;

				setTimeout( () =>{
					if(this.ke_left > W_w / 2){
						this.ke_left = W_w - 30
					}else{
						this.ke_left = 30
					}
				},100)


				console.log(W_w)

			},

			langKao(){
				this.langOp = !this.langOp;
			},
			langTab(e){
				this.lang = e;
				this.$i18n.locale = e.type;
				this.langOp = false;
			},
			gd_Num(){
				console.log("重装")
				this.$parent.reload();
			},

			navTo: function(e , b) {
				console.log(e, b)

				if(b == 'bind' && this.userData.parent_bind == 0){
					Toast.fail(this.$t('tis.invite_NO'))
					return
				}
				this.$router.push({
					name: e
				})
			},
			inviteUp(){ //绑定上级
				this.$refs.invite.show();
			},
			opRecharge() { // 充值
				this.$refs.chongzhi.show();
			},
			opWithdrawal: function() { //体现
				this.$refs.tixian.show();
			},

			async onCopy(url) {
				console.log(url)
				let target = document.createElement('input') //创建input节点
				target.className = 'copyindex'
				target.value = url; // 给input的value赋值
				document.body.appendChild(target) // 向页面插入input节点
				target.select() // 选中input
				try {
					Toast.success(this.$t('tis.copySuccess'))
					console.log('success')
					await document.execCommand('Copy') // 执行浏览器复制命令
					this.copy = true;
				} catch {
					console.log('复制失败')
				}
			},
		},
		filters: {
			TurnMa(e) {
				if (e) {
					var text1 = e.substr(0, 10);
					var text2 = e.substr(e.length - 10, 10);
					var Text = text1 + "***" + text2;
					return Text;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lang{
		height: 60px; line-height: 60px; color:#666;
		width: 200px; text-align: center;
		padding: 0px 10px;
		box-sizing: border-box;
		border-radius: 50px; color:#FFF;
		position: absolute; z-index: 9;
		top: 30px; right:30px;

		border: 2px solid #07ACCA;
		background: rgba(31, 39, 59, 0.8);

		.ul{
			position: absolute;left: 0px;  top:80px;
			border-radius: 10px;
			overflow: hidden; color:#FFF;
			width: 100%;
			height: 0px;
			    border: 0px solid #07ACCA;
			    background: rgba(31, 39, 59, 0.8);

			transition: height 0.5s;
			-ms-transition: height 0.5s; 	/* IE 9 */
			-moz-transition: height 0.5s; 	/* Firefox */
			-webkit-transition: height 0.5s; /* Safari 和 Chrome */
			-o-transition: height 0.5s; 	/* Opera */


			&.kai{
				height: 120px;
				 border: 2px solid #07ACCA;
			}

			.li{
				border-top: 2px dashed #999;
				padding: 0px 10px;
				&:nth-child(1){border:none;}
			}


		}
		.icon{height: 40px; width: 40px; margin:10px; margin-right: 0px; float: left ; }
	}

	.main {
		position: relative;
		overflow-y: scroll;
	}

	.kefu{
		position: fixed; z-index: 999;
		top: 50%; left: calc(100% - 40px - 30px) ;
		height: 80px; width: 80px;
		margin-top: -40px; margin-left: -40px;
		border-radius: 50%; background: #FFF;
		box-shadow: 0 0 3px 1px #00FFFF;
		overflow: hidden;

		&.tran{
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
		}

		.img{width: 100%; height:100%; padding: 10px; box-sizing: border-box;}
	}

	.container {
		padding: 0px;
	}

	.top {
		// height: 550px;
		padding: 100px;
		box-sizing: border-box;
		text-align: center;
		position: relative;
		z-index: 1;
		background-size:100% 100%;

		.bg {
			position: absolute;
			z-index: -1;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
		}

		.head {
			height: 180px;
			width: 180px;
			display: block;
			margin: 0px auto;
			background: #1368f8;
			padding: 4px;
			border-radius: 50%;

			background: -moz-linear-gradient(to top right, #1368f8, #5ef2ff);
			background: -webkit-linear-gradient(to top right, #1368f8, #5ef2ff);
			background: -o-linear-gradient(to top right, #1368f8, #5ef2ff);
			background: -ms-linear-gradient(to top right, #1368f8, #5ef2ff);
			background: linear-gradient(to top right, #1368f8, #5ef2ff);

			.img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.name {
			height: 100px;
			line-height: 100px;
			font-size: 28px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
		}

		.invite{
			font-size: 32px; font-weight: bold;

			.copy{color: #FFF;}
		}
		.vip-icon {
			width: 120px;
		}


	}
	.vip-box{
		display: flex; margin-top: 20px;
		justify-content:space-around;
		margin: 30px; padding: 30px;
		border: 2px solid #07ACCA; border-radius: 10px;
		background: rgba(31, 39, 59, 0.8);
		.v{
			text-align: center;
			img{width: 100px; display: inline-block;}

			.name{display: block;}

		}
	}

	.wallet {
		margin: 0px 30px;
		border-radius: 20px;
		margin-top: -80px;
		padding: 50px 30px;
		position: relative;
		text-align: center;
		z-index: 9;
		background-size:100% 100% ;

		.wallet-bg {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.vip {
			position: absolute;
			top: 30px;
			left: 0px;
			font-size: 30px;
			height: 50px;
			line-height: 50px;
			padding: 0px 30px;
			border-top-right-radius: 30px;
			border-bottom-right-radius: 30px;
		}

		.money {
			font-size: 50px;
			line-height: 60px;
			text-align: center;
			color: #e4b319;

			.lebel {
				display: block;
				font-size: 30px;
				color: #3f82e6;
				margin-bottom: 30px;
			}
		}

		.btn-flx {
			text-align: center;

			.btn {
				margin: 10px 30px;
				font-size: 30px;
				height: 70px;
				line-height: 70px;
				width: 250px;
				border-radius: 50px;
				display: inline-block;
				color: #444;


				&.on {
					border: 2px solid #07ACCA;
					box-sizing: border-box;
					background: #1f273b;
					color: #FFF;
				}

				&.f-1 {
					width: 560px;
				}
			}
		}


	}

	.copy {
		margin: 30px;
		background: rgba(31, 39, 59, 0.9);

		.nei {
			height: 100px;
			line-height: 100px;
			border: 2px solid #07ACCA;
			border-radius: 50px;
			border-bottom-left-radius: 0px;
			padding-left: 20px;

			display: flex;

			.url {
				padding: 0px 10px;
				flex: 1;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}

			.icon {
				width: 100%;
				height: 100%;
				padding: 15px;
				box-sizing: border-box;
			}

		}

		.btn {
			height: 80px;
			width: 80px;
			line-height: 80px;
			color: #333;
			font-size: 26px;
			text-align: center;
			float: right;
			margin: 10px;
			border-radius: 50%;
		}

	}

	.team {
		margin: 30px;
		border: 2px solid #07ACCA;
		background: rgba(31, 39, 59, 0.8);
		border-radius: 10px;
		position: relative;

		.vip {
			position: absolute;
			top: 30px;
			left: 0px;
			font-size: 30px;
			height: 50px;
			line-height: 50px;
			padding: 0px 30px;
			border-top-right-radius: 30px;
			border-bottom-right-radius: 30px;
		}

		.flx {
			display: flex;
			text-align: center;
			margin-top: 100px;

			.li {
				flex: 1;

				.num {
					color: #e4b319;
					font-size: 40px;
					line-height: 60px;
				}
			}
		}

		.btn {
			display: block;
			margin: 30px auto;
			color: #333;
			width: 300px;
			font-size: 30px;
			height: 60px;
			line-height: 60px;
			border-radius: 50px;
			text-align: center;
		}

	}

	.service {
		padding: 15px;
		overflow: hidden;

		.col {
			width: 50%;
			padding: 15px;
			box-sizing: border-box;
			position: relative;
			float: left;
			z-index: 1;


			.box {
				position: relative;
				background: rgba(31, 39, 59, 0.8);
				border-radius: 10px;
				text-align: center;
				padding: 30px 0px;
				font-size: 24px;
				color: #999;
				border: 2px solid #07ACCA;

				.iconfont {
					margin: 30px 0px;
					font-size: 70px;
					height: 70px;
					line-height: 70px;
				}

				.name {
					margin: 30px 0px;
					display: block;
					font-size: 24px;
					color: #eee;
				}

				.btn {
					height: 45px;
					line-height: 45px;
					padding: 0px 20px;
					border-radius: 30px;
					display: inline-block;
					color: #444;
				}

			}

		}

	}
</style>
